<template>
  <div class="repassword-box">
    <div class="repassword-title">
      <p>OBT</p>
      <span>下应用，看精华，尽在OBT</span>
    </div>

    <div class="repassword-content">
      <van-field
        v-model="nickName"
        class="box-input"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="form.phoneNum"
        center
        type="number"
        @change="uem=''"
        placeholder="请输入手机号"
        :error-message="uem"
        class="box-input"
      >
        <van-button
          slot="button"
          class="code-btn"
          size="small"
          v-if="hadSendCode"
          @click="getCode"
          :disabled="Code"
        >获取验证码</van-button>
        <van-button
          slot="button"
          class="code-btn"
          v-if="hadnotSendCode"
          :disabled="true"
          size="small"
          @click="getCode"
        >{{time}}秒</van-button>
      </van-field>

      <van-field
        v-model="phoneCode"
        class="box-input"
        placeholder="请输入验证码"
      />
      <van-field
        v-model="form.password"
        @change="pem=''"
        :type="togglePassword?'text':'password'"
        placeholder="请输入密码"
        :error-message="pem"
        @click-icon="togglePassword=!togglePassword"
        class="box-input"
      >
        <img
          slot="icon"
          v-if="form.password"
          :src="togglePassword?'static/img/login-visible.png':'static/img/login-invisible.png'"
          style="width: 24px;"
        />
      </van-field>
      <van-field
        v-model="form.rePassword"
        @change="pem=''"
        :type="toggleRePassword?'text':'password'"
        placeholder="请确认密码"
        :error-message="pem"
        @click-icon="toggleRePassword=!toggleRePassword"
        class="box-input"
      >
        <img
          slot="icon"
          v-if="form.rePassword"
          :src="toggleRePassword?'static/img/login-visible.png':'static/img/login-invisible.png'"
          style="width: 24px;"
        />
      </van-field>
      <van-button
        class="go-login"
        size="small"
        :disabled="logDis"
        @click="toLogin"
      >去登录</van-button>

      <van-button
        type="primary"
        size="large"
        :disabled="logDis"
        @click="onClickComfirm"
        class="loginBit"
      >确认</van-button>
    </div>
  </div>
</template>

<script>

  import { Toast,Loading} from 'vant';
  export default {
    components: {
    },
    data() {
      return {
        nickName: '',
        form: {
          phoneNum: '',
          password: '',
          rePassword: '',
        },
        Code:false,
        hadSendCode:true,
        uem: '',
        phoneCode: '',
        pem: "",
        togglePassword: false,
        hadnotSendCode:false,
        toggleRePassword: false,
        logDis:false,//登录按钮节流
        time:60,
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      toLogin(){
        this.$router.push('/login')
      },
      getCode(){
        var $this = this;
        if(this.form.phoneNum && (/^1\d{10}$/.test(this.form.phoneNum))){

          this.$axios({
            method: "POST",
            data: 'mobile='+this.form.phoneNum,
            url: url_g + "/verify/sms/"
          }).then((res) => {
            this.Code = true;
            this.hadSendCode = false;
            this.hadnotSendCode = true;
            var t = setInterval(function(){
              if($this.time == 0){
                $this.Code = false;
                $this.hadSendCode = true;
                $this.hadnotSendCode = false;
                clearInterval(t);
                $this.time = 60
              }else{
                $this.time = $this.time-1;
              }

            },1000)
          }).catch((e)=>{
            Toast(e.response.data.detail);
          })
        }else{
          this.toast = Toast('请输入正确的手机号');
        }
      },
      onClickComfirm() {
        this.logDis = true;
        // 检测用户名是否符合要求
        if( !/^[0-9a-zA-Z]*$/g.test(this.nickName) ) {
          this.toast = Toast('用户名仅限英文、数字');
          this.logDis = false;
          return false;
        }
        // 校验两次密码输入是否相同
        if(this.form.password !== this.form.rePassword ) {
          this.toast = Toast('请输入两次相同的密码！');
          this.logDis = false;
          return false;
        }

        if(this.form.phoneNum && this.form.password && this.phoneCode && this.nickName){
          this.$axios({
            method: "POST",
            data: {
              password: this.form.password,
              code: this.phoneCode,
              user_name: this.nickName,
            },
            url: url_g + "/password/setforget/"
          }).then((res) => {
            this.logDis = false;
            console.log(res.data)
            this.toast =  Toast(res.data.detail);
          }).catch((e)=>{
            this.logDis = false;
            if(e.response && e.response.data && e.response.data.detail){
              this.toast =  Toast(e.response.data.detail);
            }else{
              this.toast =  Toast('您输入的信息有误或网络有问题，请检查重试！');
            }
          })
        }else{
          this.logDis = false;
          this.toast = Toast('请输入完整信息');
        }
      }
    }
  }
</script>

<style scoped="scoped">
.repassword-box {
  height: 100vh;
  box-sizing: border-box;
  padding: 65px 12px 0;
  background: -moz-linear-gradient( top,#028aed,#273eec);
  background: -webkit-linear-gradient( top,#028aed,#273eec);
}
.repassword-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}
.repassword-title p {
  color: #fff;
  font-size: 40px;
  margin: 0;
  line-height: 60px;
}
.repassword-title span {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}
.box-input {
  color: #fff;
  background-color: transparent;
}
.code-btn {
  background-color: transparent;
  font-size: 12px;
  float: right;
  border: 1px solid #fff;
  color: #fff;
}
.loginBit{
  background-color:#fff;
  border-radius:50px;
  border-width:0;
  color:#23accd;
  margin-top: 20px;
}
.go-login {
  background-color: transparent;
  font-size: 14px;
  float: right;
  border: 0;
  color: #fff;
  line-height:30px;
}
</style>